<!DOCTYPE html>
<html lang="ru-RU" style="--tg-viewport-height:100vh; --tg-viewport-stable-height:100vh;" class=" aobuubu idc0_334">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Shop</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
    <link href="{{ url_for('static', path='css2') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', path='jquery-ui.min.css') }}">
    <link rel="stylesheet" id="main-css" href="{{ url_for('static', path='main.css') }}">
    <script src="{{ url_for('static', path='telegram-web-app.js') }}"></script>
    <script src="{{ url_for('static', path='sweetalert2@10.js') }}"></script>
    <script>
        const darkStyleTemplate = '<link rel="stylesheet" id="dark-css" href="{{ url_for('static', path='dark.css') }}">';

        if (window.Telegram.WebApp.colorScheme == 'dark') {
            if (document.head.querySelector('#dark-css') != null) document.head.querySelector('#dark-css').remove();
            document.head.querySelector('#main-css').insertAdjacentHTML('afterend', darkStyleTemplate);
        }

        Telegram.WebApp.onEvent('themeChanged', function () {
            const colorScheme = this.colorScheme;
            if (colorScheme == 'dark') {
                if (document.head.querySelector('#dark-css') != null) document.head.querySelector('#dark-css').remove();
                document.head.querySelector('#main-css').insertAdjacentHTML('afterend', darkStyleTemplate);
            } else {
                if (document.head.querySelector('#dark-css') != null) document.head.querySelector('#dark-css').remove();
            }
        })

        window.checkPromocodeUrl = '/promocode/check'
        window.currencySymbol = '฿';
        window.currencyPosition = 'left_without_space';
    </script>

</head>

<body>

<div class="wrap">
    <div class="page-wrapper">
        <div class="catalog-container">
            <div id="nav-wrap" class="nav-wrap is-affixed" style="height: 50px; position: relative;">
                <div class="nav" style="position: fixed; top: 0px; left: 521px; width: 375px;">
                    <div class="nav-overlay" style="left: 8px; width: 65.3359px;"></div>
                    {% for item in categories %}
                        <div class="active">
                            <span data-target-cat="#cat_${item.id}">${item.title}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="go-to-order-wrap hidden"></div>

    <div class="product-view-wrap">
        <div class="product-view-bg"></div>
        <div class="product-view">
            <div class="cross-item">
                <svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="49" height="49" rx="24.5" fill="#413D4F" fill-opacity="0.5"></rect>
                    <path d="M30 19L19 30M19 19L30 30" stroke="white" stroke-width="2.0625"
                          stroke-linecap="round"></path>
                </svg>
            </div>
            <div class="product-view-data">
                <div class="product-view-data-img-box">
                    <img src="/"
                         class="product-view-data-image js-product-image">
                </div>
                <div class="title-product-card">
                    <span class="js-product-title"></span> <span class="weight-product-card js-product-weight"></span>
                </div>
                <div class="product-description">
                    <div class="js-product-variant"></div>
                    <div class="js-product-description"></div>
                    <div class="js-product-strain-name" style="margin-top: 12px;"></div>
                    <div class="js-product-strain-type" style="margin-top: 5px;"></div>
                    <div class="js-product-feelings" style="margin-top: 5px;"></div>
                    <div class="js-product-genetics" style="margin-top: 5px;"></div>
                    <div class="js-product-thc" style="margin-top: 5px;"></div>
                    <div class="js-product-cbd" style="margin-top: 5px;"></div>
                </div>
                <div class="caption-item-wrap js-product-options"></div>
            </div>
        </div>
        <div class="product-count-wrap">
            <div class="pcw-btn-group">
                <div class="price-product-card">
                    ฿<span class="js-product-price"></span></div>
                <div class="pcw-count-wrap" style="width: auto">
                    <div class="pcw-minus" style="height: 100%; width: 40px;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                             x="0" y="0" viewBox="0 0 341.333 341.333" style="enable-background:new 0 0 512 512"
                             xml:space="preserve" class="">
                                <rect y="149.333" width="341.333" height="42.667" fill="#000000"></rect>
                            </svg>
                    </div>
                    <div class="pcw-count">1</div>
                    <div class="pcw-plus" style="height: 100%; width: 40px;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                             x="0" y="0" viewBox="0 0 341.4 341.4" style="enable-background:new 0 0 512 512"
                             xml:space="preserve" class="">
                                <polygon
                                        points="192,149.4 192,0 149.4,0 149.4,149.4 0,149.4 0,192 149.4,192 149.4,341.4 192,341.4 192,192 341.4,192 341.4,149.4 "
                                        fill="#000000" class=""></polygon>
                            </svg>
                    </div>
                </div>
                <div class="gto-btn">
                    <a href="#" class="js-add-cart">Add</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/template" id="index">
    <div class="catalog-container">
        <div id="nav-wrap" class="nav-wrap">
            <div class="nav">
                <div class="nav-overlay"></div>
            </div>
        </div>
    </div>
    </div>
</script>

<script type="text/template" id="cart">
    <div class="page-title page-title-flex">
        <span>Order</span>
        <button class="cart-empty d-none"></button>
    </div>
    <div class="cart-bg js-cart-products" data-check-url="/cart/check" data-create-url="/cart/create">
        <p class="cart-bg-text">Cart is empty</p>
    </div>
    <div class="cart-promocode-wrapper">
        <button class="cart-promocode-btn js-open-modal-promocode">Enter promocode</button>
    </div>
    <div class="modal-container">
            <div class="modal">
                <form action="/promocode/check" class="modal-form" method="POST">
                    <div class="form-group">
                        <input type="text" name="code" class="form-input js-input-uppercase" placeholder="Enter promocode" required>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="type" value="add">
                        <button type="submit" class="modal-form-btn">Submit</button>
                    </div>
                </form>
            </div>
        </div>

</script>


<script src="{{ url_for('static', path='jquery.min.js') }}"></script>
<div id="app_root"></div>
<script src="{{ url_for('static', path='jquery.lazyload.min.js') }}"></script>
<script src="{{ url_for('static', path='sticky-sidebar.js') }}"></script>
<script src="{{ url_for('static', path='wheel-indicator.js') }}"></script>
<script src="{{ url_for('static', path='jquery.mobile-events.min.js') }}"></script>
<script src="{{ url_for('static', path='http.js') }}"></script>
<script src="{{ url_for('static', path='main.js?v=2') }}"></script>


</body>

</html>